<template>
  <view class="cart-item">
    <view class="item-left" @click="toggleSelect">
      <checkbox-group @change="$emit('toggle-select')">
        <checkbox :checked="product.selected" color="$primary-color" />
      </checkbox-group>
    </view>
    
    <view class="item-content" @click="goToDetail">
      <image class="product-cover" :src="product.cover" mode="aspectFill" />
      
      <view class="product-info">
        <text class="product-name">{{product.name}}</text>
        <text class="product-spec">{{product.spec}}</text>
        <view class="price-bar">
          <text class="product-price">¥{{product.price}}</text>
          <view class="count-control">
            <text 
              class="btn-minus" 
              @click.stop="changeCount(product.count - 1)"
              :class="{disabled: product.count <= 1}"
            >-</text>
            <text class="count">{{product.count}}</text>
            <text 
              class="btn-plus" 
              @click.stop="changeCount(product.count + 1)"
              :class="{disabled: product.count >= product.stock}"
            >+</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="item-right" @click="$emit('remove-item')">
      <uni-icons type="trash" size="20" color="#999"></uni-icons>
    </view>
  </view>
</template>

<script setup>
defineProps({
  product: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['change-count', 'toggle-select', 'remove-item'])

const changeCount = (newCount) => {
  emit('change-count', newCount)
}
const toggleSelect = () => {
  emit('toggle-select')
}
const goToDetail = () => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`
  })
}
</script>

<style lang="scss">
@import "@/uni.scss";
.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: $white-bg;;
  border-radius: 10rpx;
  
  .item-left {
    padding-right: 20rpx;
  }
  
  .item-content {
    display: flex;
    
    .product-cover {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
    
    .product-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      
      .product-name {
        font-size: $font-size-28rpx;
        color: $text-color;
        @include text-ellipsis(2);
      }
      
      .product-spec {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: #999;
      }
      
      .price-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        
        .product-price {
          font-size: $font-size-32rpx;
          color: $primary-color;
          font-weight: bold;
        }
        
        .count-control {
          display: flex;
          align-items: center;
          border: 1rpx solid #eee;
          border-radius: 8rpx;
          
          text {
            padding: 0 20rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
          }
          
          .btn-minus, .btn-plus {
            font-size: $font-size-30rpx;
            color: $text-color-666;
            
            &.disabled {
              color: #ccc;
            }
          }
          
          .count {
            border-left: 1rpx solid #eee;
            border-right: 1rpx solid #eee;
            font-size: 26rpx;
          }
        }
      }
    }
  }
  
  .item-right {
    padding-left: 20rpx;
  }
}
</style>